import { Link, Navigate } from "react-router-dom";
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
  Select,
  Popconfirm,
} from "antd";
//引入日期选项器汉化
import locale from "antd/es/date-picker/locale/zh_CN";
import { Table, Tag, Space } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import img404 from "@/assets/error.png";

// 导入hooks
import useChannel from "@/hooks/useChannel";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { getArticleListApi, delArticleApi } from "@/apis/article";

const { Option } = Select;
const { RangePicker } = DatePicker;

export default function Article() {
  const navigate = useNavigate();
  //频道列表数据
  let channelList = useChannel();

  // 准备列数据
  // 定义状态枚举
  // const status = {
  //   1: <Tag color="warning">待审核</Tag>,
  //   2: <Tag color="green">审核通过</Tag>,
  // };
  const columns = [
    {
      title: "封面",
      dataIndex: "cover",
      width: 120,
      render: (cover) => {
        return (
          <img src={cover.images[0] || img404} width={80} height={60} alt="" />
        );
      },
    },
    {
      title: "标题",
      dataIndex: "title",
      width: 220,
    },
    {
      title: "状态",
      dataIndex: "status",
      // data 就是后端返回的每一行数据，
      // data = 1 => 待审核
      // data = 2 => 审核通过
      //  <Tag color="green">审核通过</Tag>
      render: (data) =>
        data === 1 ? (
          <Tag color="warning">待审核</Tag>
        ) : (
          <Tag color="green">审核通过</Tag>
        ),
      //render: (data) => status[data],
    },
    {
      title: "发布时间",
      dataIndex: "pubdate",
    },
    {
      title: "阅读数",
      dataIndex: "read_count",
    },
    {
      title: "评论数",
      dataIndex: "comment_count",
    },
    {
      title: "点赞数",
      dataIndex: "like_count",
    },
    {
      title: "操作",
      render: (data) => {
        return (
          <Space size="middle">
            {/* <Button
              type="primary"
              icon={<EditOutlined />}
              href={`/publish?id=${data.id}`}
            >
              编辑
            </Button> */}
            <Button
              type="primary"
              icon={<EditOutlined />}
              onClick={() => {
                navigate(`/publish?id=${data.id}`)
              }}
            >
              编辑
            </Button>

            <Popconfirm
              title="是否确认删除该文章？"
              okText="删除"
              cancelText="取消"
              onConfirm={() => onDelConfirm(data)}
            >
              <Button type="primary" danger icon={<DeleteOutlined />}>
                删除
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  // 文章列表数据
  const [list, setList] = useState([]);
  // 文章列表总数
  const [count, setCount] = useState(0);

  // 筛选功能
  // 1、准备参数
  const [reqData, setReqData] = useState({
    // 1 = 待审核
    // 2 = 审核通过
    status: "",
    // 频道id
    channel_id: "",
    // 起始时间
    begin_pubdate: "",
    // 结束时间
    end_pubdate: "",
    // 当前页码：如第1页
    page: 1,
    // 当前页数量：如每页10条
    per_page: 5,
  });

  // 2、获取筛选数据
  const onFinish = (formValues) => {
    console.log("formValues:", formValues);
    // 3、收集表单数据放到参数中
    setReqData({
      ...reqData,
      channel_id: formValues.channel_id,
      status: formValues.status,
      begin_pubdate: formValues.date && formValues.date[0].format("YYYY-MM-DD"),
      end_pubdate: formValues.date && formValues.date[1].format("YYYY-MM-DD"),
    });
    // 4、重新拉取文章列表+渲染table逻辑重复-复用
    // reqData依赖项发生变化 重新执行副作用函数
  };
  // 分页
  const onPageChange = (page) => {
    console.log("page:", page);
    setReqData({
      ...reqData,
      page: page,
    });
  };

  // 删除文章
  const onDelConfirm = async (data) => {
    // 调用接口删除文章
    await delArticleApi(data.id);
    // 修改文章列表，引起页面更新
    setReqData({ ...reqData });
  };

  // 组件渲染完成后请求文章列表数据
  useEffect(() => {
    const getArticleList = async () => {
      // 调用接口获取文章列表数据
      const res = await getArticleListApi(reqData);
      // 设置文章列表数据
      setList(res.data.results);
      // 设置文章列表总数
      setCount(res.data.total_count);
    };
    getArticleList();
  }, [reqData]); // reqData 变化时重新请求文章列表数据

  return (
    <>
      <Card
        title={
          <Breadcrumb
            items={[
              { title: <Link to={"/"}>首页</Link> },
              { title: "文章列表" },
            ]}
          />
        }
        style={{ marginBottom: 20 }}
      >
        <Form initialValues={{ status: 2 }} onFinish={onFinish}>
          <Form.Item label="状态" name="status">
            <Radio.Group>
              <Radio value={0}>全部</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="频道" name="channel_id">
            <Select placeholder="请选择文章频道" style={{ width: 120 }}>
              {channelList.map((item) => {
                return (
                  /* value属性为频道id */
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item label="日期" name="date">
            {/* 传入locale属性 控制中文显示*/}
            <RangePicker locale={locale}></RangePicker>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>

      {/*  文章列表    */}
      <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={list}
          pagination={{
            total: count,
            pageSize: reqData.per_page,
            onChange: onPageChange,
          }}
        />
      </Card>
    </>
  );
}
